<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">

	<!-- 
		Replace path to template, title, header and body
		with actual data.
	 -->
	<ui:composition template="./../plantilla/plantillaGeneral.xhtml">
            <ui:define name="title">
               #{general.administracion} #{general.cliente}
            </ui:define>
            <ui:define name="content">
     <h:form id="form">

    <p:growl id="msgs" showDetail="true" />

    <p:dataTable id="cars" var="car" value="#{tableBean.cars}" tableStyle="width:auto"  selection="#{tableBean.selectedCar}" rowSelectListener="#{tableBean.onRowSelect}">

        <p:column headerText="Model" style="width:100px">
            <h:outputText value="#{car.model}" />
        </p:column>

        <p:column headerText="Year" style="width:100px">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Manufacturer" style="width:100px">
            <h:outputText value="#{car.manufacturer}" />
        </p:column>

        <p:column headerText="Color" style="width:100px">
            <h:outputText value="#{car.color}" />
        </p:column>

        <p:column style="width:40px">
             <h:panelGrid columns="3" styleClass="actions" cellpadding="2">
                 <p:commandButton update=":form:display,carDialog" oncomplete="carDialog.show()" icon="ui-icon-search" title="View">
                   <!--   <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" /> -->
                 </p:commandButton>
             </h:panelGrid>
        </p:column>

    </p:dataTable>

    <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" id="carDlg"
                showEffect="fade" hideEffect="explode" modal="true">

        <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">

            <f:facet name="header">
                <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
            </f:facet>

            <h:outputText value="Model:" />
            <h:outputText value="#{tableBean.selectedCar.model}" style="font-weight:bold"/>

            <h:outputText value="Year:" />
            <h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold"/>


            <h:outputText value="Manufacturer:" />
            <h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold"/>

            <h:outputText value="Color:" />
            <h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold"/>

        </h:panelGrid>

    </p:dialog>

</h:form>
                    
                
            </ui:define>
        </ui:composition>

</html>